<template>
	<view class="doctor-container">
		<view class="doctor-search">
			<view class="search-img"><image src="/static/search.png"></image></view>
			<input type="text" placeholder="搜索医生或科室"/>
		</view>
		<view class="doctor-tag">
			 <text class="tag-box"
			      v-for="(tag, index) in tags" 
			      :key="tag.id" 
			      :class="{active: activeIndex === index}" 
			      @click="handleClick(tag.id,index)"
			    >
			      {{tag.name}}
			    </text>
		</view>
		<view class="doctorCard-container">
		<view class="doctor-card" v-for="data in dcData" :key="data.id">
			<view class="card-photo"><image :src="data.image"></image></view>
			<text class="card-name">{{data.name}}</text>
			<text class="card-position">{{data.position}}</text>
			<text class="card-tag">{{data.tag}}</text>
			<view class="card-speciality">
				 <text class="speciality-box" v-for="(item, index) in data.speciality" :key="index">
				      {{item.name}}
				    </text>
			</view>
			<view class="card-profile">
			{{data.profile}}
			</view>
			<view class="card-time">
				<view class="time-img"><image src="/static/clock.png"></image></view>
				<text class="time-text">{{data.time}}</text>
			</view>
			<view class="card-visited">
				<view class="visited-img"><image src="/static/local.png"></image></view>
				<text class="visited-text">{{data.visited}}就诊</text>
			</view>
			<view class="card-button" @click="goToDetail">问诊咨询</view>
		</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue';
	import { members,department } from '@/api/doctor';
	
	const goToDetail =()=>{
		uni.navigateTo({
			url:"/pages/doctor/detail"
		})
	}
	
	const error = ref(null);
	// 在组件中修改数据获取逻辑
	
	const fetchDoctorList = async (tagId) => {
     uni.showLoading({
    title: '加载中...', // 提示文字
    mask: true // 开启蒙层防止用户误操作
     });
	  try {
	    const response = await members({ departmentId: tagId });
	    console.log(tagId)
	    if (response.code === "200") {
	      dcData.value = response.data.map(item => ({
	        id: item.id.toString(), 
	        image: item.photo, 
	        name: item.name,
	        position: item.title || "未知职称", 
	        tag: item.department, 
	        speciality: item.tags, 
			profile: item.profile,
	        time: "未知", 
	        visited: "0人" 
	      }));
		  console.log(dcData.value)
         uni.hideLoading({
           success: (response) => {
           },
           complete: response => {
           }
         });
	    } else {
	      error.value = response.msg || '获取医生列表失败';
	    }
	  } catch (err) {
	    error.value = err.message || '网络请求出错';
	  }
	};
	
	onMounted(() => {
		 uni.showLoading({
		    title: '加载中...', // 提示文字
		    mask: true // 开启蒙层防止用户误操作
		     });
		department().then((response) => {
		        if (response.code === "200") {
		          tags.value = response.data;
		        } else {
		          console.error('请求失败，状态码:', response.code);
		        }
		      }).catch((error) => {
		        console.error('请求失败:', error);
		      });
			  
			  members({ departmentId: 0 }).then((response) => {
		        if (response.code === "200") {
		          dcData.value = response.data.map(item => ({
		         	        id: item.id.toString(), 
		         	        image: item.photo || "/static/doctorPhoto.png", 
		         	        name: item.name,
		         	        position: item.title || "未知职称", 
		         	        tag: item.department, 
		         	        speciality: item.tags, 
							profile: item.profile,
		         	        time: "未知", 
		         	        visited: "0人" 
		         	      }));
						   uni.hideLoading({
						  		    success: (response) => {
						  		    },
						  		    complete: response => {
						  		    }
						  		  });
		        } else {
		          console.error('请求失败，状态码:', response.code);
		        }
		      }).catch((error) => {
		        console.error('请求失败:', error);
		      });
	});
	
	// 定义标签数组
	const tags = ref([]);
	
	// 定义当前激活的标签索引
	const activeIndex = ref(0);
	
	// 点击事件处理函数
	const handleClick = (tagId,index) => {
	  activeIndex.value = index;
	   fetchDoctorList(tagId);
	};
	
	const dcData = ref([]);
</script>

<style lang="scss">
	.doctor-container{
		height: 100vh;
		width: 750rpx;
		background-color: #F8F5FF;
		position: relative;
		.doctor-search{
			position: absolute;
			left: 50%;
			top: 20rpx;
			transform: translate(-50%,-50%);
			width: 696rpx;
			height: 60rpx;
			margin: 20rpx auto;
			background-color: #ffffff;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			.search-img{
				width: 40rpx;
				height: 40rpx;
				margin-left: 24rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			input{
				flex: 1;
				height: 100%;
				font-size: 25rpx;
				margin-left: 8rpx;
			}
		}
		.doctor-tag{
			position: absolute;
			left: 50%;
			top: 110rpx;
			transform: translate(-50%,-50%);
			width: 696rpx;
			height: 80rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: flex-start; 
            flex-wrap: nowrap; 
            overflow-x: auto; /* 允许水平滚动 */
            white-space: nowrap; /* 防止文本换行 */
            -webkit-overflow-scrolling: touch; /* 在iOS上实现平滑滚动 */
			scrollbar-width: none;
			.tag-box{
				margin: 0 10rpx;
				height: 45rpx;
				line-height: 45rpx;
				color: #7134A6;
				font-size: 25rpx;
				background-color: #E6E6FA;
				padding: 8rpx 20rpx;
				border-radius: 30rpx;
			}
			.active {
			  background-color: #7134A6;
			  color: #F8F5FF;
			}
		}
		.doctorCard-container{
			position: absolute;
			top: 150rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 700rpx;
		.doctor-card{
			position: relative;
			height: 580rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 25rpx;
			.card-photo{
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 160rpx;
				height: 228rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.card-name{
				font-size: 25rpx;
				font-weight: 700;
				color: #24244E;
				position: absolute;
				top: 20rpx;
				left: 220rpx;
			}
			.card-position{
				font-size: 25rpx;
				color: #24244E;
				position: absolute;
				top: 65rpx;
				left: 220rpx;
			}
			.card-tag{
				position: absolute;
				left: 220rpx;
				top: 120rpx;
				height: 45rpx;
				line-height: 45rpx;
				color: #7134A6;
				font-size: 25rpx;
				background-color: #E6E6FA;
				padding: 8rpx 20rpx;
				border-radius: 30rpx;
			}
			.card-speciality{
				position: absolute;
				left: 220rpx;
				top: 200rpx;
				height: 100rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				.speciality-box{
					height: 40rpx;
					line-height: 40rpx;
					color: #4B5563;
					font-size: 20rpx;
					background-color: #F1F1F1;
					padding: 5rpx 12rpx;
					border-radius: 25rpx;
					margin-bottom: 10rpx;
					margin-right: 10rpx;
				}
			}
			.card-profile{
				position: absolute;
				left: 220rpx;
				top: 320rpx;
				height: 140rpx;
				width:450rpx;
				color: #7134A6;
				font-size: 23rpx;
				word-wrap: break-word;
			}
			.card-time{
				position: absolute;
				left: 20rpx;
				top: 270rpx;
				width: 90rpx;
				height: 45rpx;
				display: flex;
				.time-img{
					width: 32rpx;
					height: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.time-text{
					font-size: 23rpx;
					color: #4B5563;
					margin-left: 5rpx;
				}
			}
			.card-visited{
				position: absolute;
				left: 20rpx;
				top: 315rpx;
				width: 160rpx;
				height: 45rpx;
				display: flex;
				.visited-img{
					width: 32rpx;
					height: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.visited-text{
					font-size: 23rpx;
					color: #4B5563;
					margin-left: 5rpx;
					line-height: 45rpx;
				}
			}
			.card-button{
				position: absolute;
				left: 20rpx;
				bottom: 20rpx;
				height: 88rpx;
				width: 660rpx;
				text-align: center;
				line-height:88rpx;
				color: #7134A6;
				font-size: 37rpx;
				font-weight: 700;
				background-color: #E6E6FA;
				border-radius: 30rpx;
				letter-spacing: 3rpx;
			}
		}
		}
	}
</style>